import React, { useState } from 'react';
import { View, Image, Button,  Alert } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import Icon from 'react-native-vector-icons/AntDesign';
import tw from "twrnc";
import { post } from '@/utils/api';



interface AvatarUploaderProps {
    onImageSelected: (imageUri: string) => void;
}

const AvatarUploader: React.FC<AvatarUploaderProps> = ({ onImageSelected  }) => {
    const [image, setImage] = useState<string | null>(null);
    

    // 请求相册权限并选择图片
    const pickImage = async () => {
        const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (!permissionResult.granted) {
            Alert.alert('Permission to access camera roll is required!');
            return;
        }

        const result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.Images,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1,
        });

        if (!result.canceled && result.assets[0]?.uri) {            
            setImage(result.assets[0].uri);
            
        }
    };


    // 处理完成按钮点击事件
    const handleComplete = async () => {
        onImageSelected(image);
    }

    // // 上传图片
    // const uploadImage = async () => {
    //     if (!image) {
    //         Alert.alert('请先选择一张图片');
    //         return;
    //     }

    //     const formData = new FormData();
    //     const filename = image.split('/').pop();
    //     const fileType = filename ? filename.split('.').pop() : 'jpg';

    //     // 使用 fetch 获取文件
    //     const response = await fetch(image);
    //     const blob = await response.blob();

    //     // 创建一个新的 File 对象
    //     const file = new File([blob], filename, { type: `image/${fileType}` });

    //     // 将 File 对象添加到 FormData 中
    //     formData.append('file', file);

    //     try {
            
    //         const response = await post('upload', formData,  );

    //         if (response.status === 200) {
    //             Alert.alert('上传成功');
    //             setImage(null);
    //         } else {
    //             Alert.alert('上传失败，请稍后重试');
    //         }
    //     } catch (error) {
    //         console.error(error);
    //         Alert.alert('上传过程中发生错误');
    //     }
    // };

    return (
        <View style={tw`flex items-center justify-center my-10`}>


            {image ?
                <View style={tw`mt-2`}>
                    <Image source={{ uri: image }} style={tw`w-50 h-50 rounded-lg`} />
                    <View style={tw`mt-2`}><Button color='#26EBD7' title="完成" onPress={handleComplete} /></View>
                </View>

                : <View style={tw`mt-2 flex-row items-center justify-center rounded-lg bg-slate-200 w-50 h-50`}>
                    <Icon name="camerao" size={50} color="#A7ABAA" onPress={pickImage} />
                </View>
            }
        </View>
    );
};



export default AvatarUploader;



